<template>
  <ul class="details_list">
    <li v-for="item in classifyList" :key="item.id">
      <div @click="popupStandard(item)">
        {{item.quantizeName}}<x-icon type="ios-arrow-right" size="22" v-if="!item.isShow"></x-icon>
        <x-icon type="ios-arrow-down" size="22" v-if="item.isShow"></x-icon>
      </div>
      <div style="height:auto;width:100%;" :class="item.isShow?'show':'hide'">
        <tree-classify :classify-list="item.children" :keyList="keyList"></tree-classify>
        <ul class="list_3">
          <li v-for="question in item.questionList" :key="question.id">
            <p>{{question.keyRequire}}</p>
            <span v-if="question.isMissingItem=='1'">缺项</span>
            <span v-else-if="question.actualScore>=0">{{question.actualScore}}</span>
            <x-icon type="ios-arrow-right" size="22" class="icon-right" @click="popupKeyrequire(question)"></x-icon>
          </li>
        </ul>
      </div>
    </li>
    <div v-transfer-dom>
      <popup v-model="standard" width="100%" position="top" height="100%">
        <item :data="questionList" @nodeClick="nodeClick" :title="title" @save="SaveItem" @saveDivision="saveDivision"></item>
      </popup>
      <popup v-model="keyrequire" width="100%" should-rerender-on-show>
        <standard :data="recordItem" @nodeClick="closeKeyrequire" @save="SaveItem"></standard>
      </popup>
    </div>
  </ul>
</template>
<script>
  import { TransferDom, Popup } from "vux";
  import item from "./item";
  import standard from "./standard";
  export default {
    directives: {
      TransferDom
    },
    components: { item, Popup, standard },
    props: {
      classifyList: {
        type: Array,
        default: function () {
          return [];
        }
      },
      keyList: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },
    name: "questionTree",
    data() {
      return {
        classList: [],
        standard: false,
        questionList: [],
        keyrequire: false,
        recordItem: {
          keyRequire: "",
          shouldScore: 0
        },
        title: ""
      };
    },
    watch: {},
    methods: {
      popupStandard(item) {
        let that = this;
        if (item.children.length == 0) {
          let arr = [];
          that.keyList.forEach(i => {
            arr = arr.concat(i.commonList.filter(x => x.classifyId == item.id));
          });
          that.questionList = arr;
          that.title = item.quantizeName;
          that.standard = true;

        } else {
          if (item.isShow) item.isShow = false;
          else {
            let arr = [];
            this.keyList.forEach(i => {
              arr = arr.concat(i.commonList.filter(x => x.classifyId == item.id));
            });
            item.questionList = arr;
            item.isShow = true;
          }
          that.$forceUpdate();
        }
      },
      nodeClick(data) {
        this.standard = false;
      },
      popupKeyrequire(item) {
        if (!item.actualScore) {
          item.actualScore = 0;
        }
        this.recordItem = item;
        this.keyrequire = true;
      },
      closeKeyrequire() {
        this.keyrequire = false;
      },
      SaveItem(data) {
        let that = this;
        for (let item of that.keyList) {
          let common = item.commonList.filter(
            x => x.standardId == data.standardId
          );
          if (common.length == 1) {
            common[0].actualScore = data.actualScore;
            common[0].isMissingItem = data.isMissingItem;
            common[0].deductionReason = data.deductionReason;
            common[0].shouldScore = data.shouldScore;
            common[0].fileList = data.fileList;
            break;
          }
        }
        this.keyrequire = false;
      },
      saveDivision(list) {
        let that = this;
        for (let data of list) {
          for (let item of that.keyList) {
            let common = item.commonList.filter(x => x.id == data.id);
            if (common.length == 1) {
              common[0].actualScore = data.actualScore;
              common[0].isMissingItem = data.isMissingItem;
              common[0].deductionReason = data.deductionReason;
              common[0].shouldScore = data.shouldScore;
              common[0].fileList = data.fileList;
              break;
            }
          }
        }
        this.standard = false;
      }
    }
  };
</script>
<style lang="less">
  .hide {
    display: none;
  }

  .show {
    display: inline-block;
  }

  .details_list {
    .vux-x-icon

  {
    fill: #999;
    float: right;
    margin-top: 16px;
  }

  li {
    > div

  {
    height: 54px;
    line-height: 54px;
    padding-right: 20px;
  }

  }

  > li {
    justify-content: space-between;
    padding-left: 20px;
    > div

  {
    font-weight: bold;
    font-size: 16px;
  }

  .list_2 {
    li

  {
    border-top: 1px solid #ebeef2;
    > div

  {
    font-weight: bold;
    font-size: 14px;
  }

  }
  }

  .list_3 {
    li

  {
    font-size: 14px;
    text-indent: 2em;
    height: 55px;
    line-height: 54px;
    border-top: 1px solid #ebeef2;
    padding-right: 20px;
    p{
      float: left;
      width: 70%;
    }
  }

  }
  }
  }
</style>
